<template>
  <section id="features" aria-label="Features" class="relative overflow-hidden bg-blue-600 pb-28 pt-20 sm:py-32">
    <img
      :src="backgroundImage"
      alt=""
      class="absolute left-1/2 top-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
    />
    <Container class="relative">
      <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
          Everything you need to run your books.
        </h2>
        <p class="mt-6 text-lg tracking-tight text-blue-100">
          Well everything you need if you aren't that picky about minor details like tax compliance.
        </p>
      </div>

      <Tabs :value="activeTab" @update:value="val => (activeTab = val)" class="mt-16 pt-10 md:mt-20 lg:pt-0">
        <div class="grid grid-cols-12 items-center">
          <div class="col-span-5">
            <TabList unstyled class="relative z-10">
              <div>
                <div
                  v-for="(feature, index) in features"
                  :key="feature.title"
                  class="group relative rounded-l-xl p-6"
                  :class="[
                    activeTab === index.toString() ? 'bg-white/10 ring-1 ring-inset ring-white/10' : 'hover:bg-white/5',
                  ]"
                >
                  <h3>
                    <Tab
                      unstyled
                      :value="index.toString()"
                      class="font-display text-lg text-white flex flex-col justify-start"
                    >
                      {{ feature.title }}
                      <p
                        class="mt-2 text-sm text-left"
                        :class="[
                          activeTab === index.toString() ? 'text-white' : 'text-blue-100 group-hover:text-white',
                        ]"
                      >
                        {{ feature.description }}
                      </p>
                    </Tab>
                  </h3>
                </div>
              </div>
            </TabList>
          </div>
          <div class="col-span-7">
            <TabPanels unstyled>
              <TabPanel v-for="(feature, index) in features" :key="feature.title" :value="index.toString()">
                <div
                  class="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]"
                >
                  <img
                    :src="feature.image"
                    alt=""
                    class="w-full"
                    :sizes="'(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem'"
                  />
                </div>
              </TabPanel>
            </TabPanels>
          </div>
        </div>
      </Tabs>
    </Container>
  </section>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  // import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primevue/tabs'
  import Container from './Container.vue'

  // 导入图片
  import backgroundImage from '@/assets/images/background-features.jpg'
  import screenshotExpenses from '@/assets/images/screenshots/expenses.png'
  import screenshotPayroll from '@/assets/images/screenshots/payroll.png'
  import screenshotReporting from '@/assets/images/screenshots/reporting.png'
  import screenshotVatReturns from '@/assets/images/screenshots/vat-returns.png'

  const activeTab = ref<string | number>('0')

  // 响应式布局处理
  const handleResize = () => {
    const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
    // 在这里可以添加垂直/水平布局的逻辑
  }

  onMounted(() => {
    handleResize()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  // 特性数据
  const features = [
    {
      title: 'Payroll',
      description:
        "Keep track of everyone's salaries and whether or not they've been paid. Direct deposit not supported.",
      image: screenshotPayroll,
    },
    {
      title: 'Claim expenses',
      description:
        "All of your receipts organized into one place, as long as you don't mind typing in the data by hand.",
      image: screenshotExpenses,
    },
    {
      title: 'VAT handling',
      description:
        "We only sell our software to companies who don't deal with VAT at all, so technically we do all the VAT stuff they need.",
      image: screenshotVatReturns,
    },
    {
      title: 'Reporting',
      description:
        'Easily export your data into an Excel spreadsheet where you can do whatever the hell you want with it.',
      image: screenshotReporting,
    },
  ]
</script>
